<template>
  <div class="user">
    <van-nav-bar title="我的" @click-right="$router.push('/userinfo')">
      <template #right>
        <van-icon name="setting-o" size="18" />
      </template>
    </van-nav-bar>
    <div class="userinfo" @click="$router.push('/login')">
      <div class="left">
        <van-image round src="https://img01.yzcdn.cn/vant/cat.jpeg" />
        <div class="tip">
          <h1>请登录</h1>
          <p>登录之后更精彩</p>
        </div>
      </div>
      <div class="right">
        <van-icon name="arrow" size="20" />
      </div>
    </div>

    <van-grid clickable :column-num="3" icon-size="20px">
      <van-grid-item icon="like-o" text="收藏" to="/collect" />
      <van-grid-item icon="good-job-o" text="点赞" to="/like" />
      <van-grid-item icon="comment-o" text="文章" to="/article" />
    </van-grid>

    <van-cell title="我的收藏" is-link icon="like-o" to="/collect" />
    <van-cell title="我的点赞" is-link icon="good-job-o" to="/like" />
    <van-cell title="我的文章" is-link icon="comment-o" to="/article" />

    <div style="margin: 0 10px">
      <van-button block type="info">立即退出</van-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'user-index'
}
</script>

<style lang="less" scoped>
.user {
  .title {
    font-size: 60px;
    color: #1989fa;
    font-weight: 400;
    text-align: center;
  }
  /deep/ .van-hairline--bottom::after {
    border-bottom: 0 none;
  }
  .van-nav-bar {
    background-color: #1989fa;
    /deep/ .van-icon {
      color: white;
    }
    /deep/ .van-nav-bar__title {
      color: white;
    }
  }
  .userinfo {
    height: 188px;
    background-color: #1989fa;
    color: white;
    display: flex;
    align-items: center;
    padding: 20px;
    justify-content: space-between;
    .left {
      width: 80%;
      display: flex;
      /deep/ img {
        width: 150px;
        height: 150px;
      }
      .tip {
        margin-left: 30px;

        display: flex;
        flex-direction: column;
        justify-content: center;
        h1,
        p {
          margin: 5px;
          padding: 0px;
        }
      }
    }
  }
  .van-grid {
    /deep/ .van-grid-item__text {
      font-size: 24px;
      color: #333;
    }
  }
}
</style>
